<template>
  <div class="overflow-auto">
    <span class="float-right cursor-pointer font-size-3" @click="handleToggle">
      评论 <span class="color-blue">{{ total }}</span>
    </span>
  </div>
  <ul v-show="isToggle">
    <li
      v-for="item in list"
      :key="item.id"
      class="mt3 flex flex-row border-t border-gray border-t-dashed pt3"
    >
      <el-avatar :src="item.avatar" />
      <div class="ml3 flex-grow font-size-3">
        <div class="color-orange">{{ item.nickname }}</div>
        <div class="mb1 mt1">{{ item.content }}</div>
        <div class="color-gray">{{ formatDate(item.createTime) }}</div>
      </div>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { formatDate } from '@/utils/formatTime'
import * as MemberCommentApi from '@/api/member/memberComment'

defineOptions({ name: 'MemberComment' })

const { momentId } = defineProps({
  momentId: {
    type: Number,
    default: undefined
  }
})

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  no: null,
  userId: null,
  content: null,
  momentId,
  momentUser: null,
  commentTime: [],
  imgUrl: null,
  videoUrl: null,
  status: null,
  momentNo: null,
  momentContent: null,
  auitUser: null,
  auitTime: [],
  rejectReason: null,
  creator: null,
  createTime: [],
  updater: null,
  updateTime: []
})

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await MemberCommentApi.getMemberCommentPage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const isToggle = ref(false)
const handleToggle = () => {
  isToggle.value = !isToggle.value
}

/** 初始化 **/
onMounted(() => {
  getList()
})
</script>
